<%@ include file="/includes/taglibs.jsp"%>
<ul class="breadcrumb">
	<li><a href="<c:url value="/users/list.html"/>">User</a> <span
		class="divider">/</span></li>
	<li class="active">Add or Update data</li>
</ul>

<H2>Data Menu</H2>
<!-- 	<div class="well">
		<h4>
			<img src="<c:url value="/images/warning.gif"/>" align="top" /> 
		</h4>
		<ol>
				<li>${error}</li>
		</ol>

	</div>
 -->
<form method="post" class="form-horizontal" style="padding: 5px;" name="form-data" novalidate="novalidate">
	<input type="hidden" id="menuid" name="menuid"/>
	<div class="control-group">
		<label class="control-label" for="menuname">Menu Name</label>
		<div class="controls">
			<div class="input-prepend">				
				<input type="text" id="menuname" name="menuname" placeholder="MenuName" />
			</div>
		</div>
	</div>
	<div class="control-group">
		<label class="control-label" for="link">Link</label>
		<div class="controls">
			<div class="input-prepend">				
				<input type="text" id="link" name="link" placeholder="Link" />
			</div>
		</div>
	</div>
			
				<input type="hidden" id="caption" name="caption" placeholder="Caption" />
	<div class="control-group">	
		<label class="control-label" for="parent">Parent</label>
		<div class="controls">
			<div class="input-prepend">	
				<select id="parent" name="parent" >
				</select>
			</div>
		</div>
	</div>
			
	<div class="control-group">	
		<label class="control-label" for="levels">Level</label>
		<div class="controls">
			<input type="radio" name="levels" id="levels" value="0" checked>&nbsp;0&nbsp;
			<input type="radio" name="levels" id="levels" value="1">&nbsp;1&nbsp;
			<input type="radio" name="levels" id="levels" value="2">&nbsp;2&nbsp;
			<input type="radio" name="levels" id="levels" value="3">&nbsp;3&nbsp;
		</div>
	</div>		
	<div class="control-group">	
		<button type="submit" class="btn btn-primary">Save</button>
		<button type="reset" class="btn">Reset</button>
		<button type="button" class="btn"
			onclick="location.href='<c:url value="/menu/list.html"/>'">Cancel</button>
	</div>
</form>

<script type="text/javascript">

	$.getJSON('<c:url value="/menu/search?page=1&limit=100&sort=menuid&dir=asc" />',
	function(data) {
		$.each(data.content, function() {
			//console.log("list=" + this.usergroupid);
			$('#parent').append($('<option />', {
				value : this.menuid,
				text : this.menuname
			}));
		});
	});
	$(document).ready(
	function() {
		var validasi = $('form[name="form-data"]').validate({
			rules:{
				menuname:"required",
				link:"required"				
			},
			errorClass: "help-inline"
		});
		function getURLParameter(name) {
			return decodeURI((RegExp(name + '=' + '(.+?)(&|$)').exec(
					location.search) || [ , null ])[1]);
		}

		var itemid = getURLParameter("itemId");
		//console.log("itemid="+itemid);
		if (itemid != null && itemid != 'null') {
			$.getJSON('<c:url value="/menu/findone/" />' + itemid,
					function(data) {
						$.each(data, function(obj, value) {
							if (obj == "parent") {
								$("#parent").val(value).prop('selected', 'selected');
							} else if( obj == "levels"){
								$("input[name=levels][value="+value+"]").prop('checked', true);
							} else
								$('input[name="' + obj + '"]').val(value);
						});
					});
		}
// 		$('#parent').change(function(){
// 			console.log("berubah");
// 		});
		$('form[name="form-data"]').submit(function() {

			if($('form[name="form-data"]').valid()){			
				var json = $('form').serializeObject();
//				console.log(JSON.stringify(json));
				$.ajax({
					type : "POST",
					url : "<c:url value="/menu/save" />",
					contentType : "application/json; charset=utf-8",
					dataType : "json",
					data : JSON.stringify(json)
				}).done(function(msg) {
					alert("Data: " + msg);
					window.location.href = "<c:url value="/menu/list.html"/>";
				});

			return false;
			}
		});
	});
</script>

